import Configer from "../../../script/frame/apiModel/config/Configer";
import {GuiId, GuiKeys} from "../../../script/controller/model/ControllerOpt";
import {ConfigKey} from "../../../script/constant/ConfigConstant";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import * as React from "../../../script/frame/apiModel/gui/React";
import {Element, IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {LightButton} from "../component/LightButton";
import {ButtonEnterInterface} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";


interface ButtonAttr {
    icon: string;
    barElement: React.Element<any, any>;
}
interface IProp {
}
interface IState {
}
export default class ButtonEnter extends ButtonEnterInterface<IProp, IState> {

    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            visible: true,
        }
    }
    render = () => {
        const buttonSize = { h: 0.06, w: 0.04 };
        const topButtonY = 0.04980

        const buttonMarginX = 0.06250
        const buttonSpace = 0.00625


        const buttonArr: Element<any, any>[] = [];

        const sideButtonArr: Element<any, any>[] = [];
        const sideButtonSize = { h: 0.06, w: 0.04 };


        const useAttrBar = Configer.getConfig(ConfigKey.useAttrBar);
        const attrButton: string = Configer.getResource(ResourceKey.attrButton);
        const sideButtonMarginT = 0.03;
        if (useAttrBar && useAttrBar > 0 && attrButton && attrButton.length && attrButton.length > 0) {
            const element = <LightButton   key={GuiKeys.buttonEnterAttr} onMouseDown={(event) => {
                return this.open(GuiId.attrBar);
            }} style={{ backgroundImage: attrButton, width: sideButtonSize.w, height: sideButtonSize.h, marginT: sideButtonMarginT }}>
            </LightButton>
            sideButtonArr.push(element)
        }

        const useGoodsBar = Configer.getConfig(ConfigKey.useGoodsBar);
        const bagButton: string = Configer.getResource(ResourceKey.bagButton);
        if (useGoodsBar && useGoodsBar > 0 && bagButton && bagButton.length && bagButton.length > 0) {
            const element = <LightButton   key={GuiKeys.buttonEnterBag} onMouseDown={(event) => {
                return this.open(GuiId.goodsBar);
            }} style={{ backgroundImage: bagButton, width: sideButtonSize.w, height: sideButtonSize.h, marginT: sideButtonMarginT }}>
            </LightButton>
            sideButtonArr.push(element)
        }

        // -------------------------------------------------------------------------------------------------------

        const useAch = Configer.getConfig(ConfigKey.useAchBar);
        const achButton: string = Configer.getResource(ResourceKey.achButton);
        if (useAch && useAch > 0 && achButton && achButton.length && achButton.length > 0) {
            const element = <LightButton   key={GuiKeys.buttonEnterAch} onMouseDown={(event) => {
                return this.open(GuiId.achBar);
            }} style={{ backgroundImage: achButton, top: topButtonY, left: buttonMarginX + (buttonSize.w + buttonSpace) * buttonArr.length, width: buttonSize.w, height: buttonSize.h }}>
            </LightButton>
            buttonArr.push(element)
        }

        const useHandBook = Configer.getConfig(ConfigKey.useHandBook);
        const handBookButton: string = Configer.getResource(ResourceKey.handBookButton);
        if (useHandBook && useHandBook > 0 && handBookButton && handBookButton.length && handBookButton.length > 0) {
            const element = <LightButton   key={GuiKeys.buttonEnterHandBook} onMouseDown={(event) => {
                return this.open(GuiId.handBookBar);
            }} style={{ backgroundImage: handBookButton, top: topButtonY, left: buttonMarginX + (buttonSize.w + buttonSpace) * buttonArr.length, width: buttonSize.w, height: buttonSize.h }}>
            </LightButton>
            buttonArr.push(element)
        }

        const useTalentBar = Configer.getConfig(ConfigKey.useTalentBar);
        const tanlentButton: string = Configer.getResource(ResourceKey.talentButton);
        if (useTalentBar && useTalentBar > 0 && tanlentButton && tanlentButton.length && tanlentButton.length > 0) {
            const element = <LightButton   key={GuiKeys.buttonEnterTalent} onMouseDown={(event) => {
                return this.open(GuiId.talentBar);
            }} style={{ backgroundImage: tanlentButton, top: topButtonY, left: buttonMarginX + (buttonSize.w + buttonSpace) * buttonArr.length, width: buttonSize.w, height: buttonSize.h }}>
            </LightButton>
            buttonArr.push(element)
        }

        const useAppearance = Configer.getConfig(ConfigKey.useAppearance);
        const appearanceButton: string = Configer.getResource(ResourceKey.appearanceButton);
        if (useAppearance && useAppearance > 0 && appearanceButton && appearanceButton.length && appearanceButton.length > 0) {
            const element = <LightButton   key={GuiKeys.buttonEnterAppear} onMouseDown={(event) => {
                return this.open(GuiId.appBar);
            }} style={{ backgroundImage: appearanceButton, top: topButtonY, left: buttonMarginX + (buttonSize.w + buttonSpace) * buttonArr.length, width: buttonSize.w, height: buttonSize.h }}>
            </LightButton>
            buttonArr.push(element)
        }

        const useIntegralMall = Configer.getConfig(ConfigKey.useIntegralMall);
        const integralMallButton: string = Configer.getResource(ResourceKey.integralMallButton);
        if (useIntegralMall && useIntegralMall > 0 && integralMallButton && integralMallButton.length && integralMallButton.length > 0) {
            const element = <LightButton   key={GuiKeys.buttonEnterMall} onMouseDown={(event) => {
                return this.open(GuiId.integralMallBar);
            }} style={{ backgroundImage: integralMallButton, top: topButtonY, left: buttonMarginX + (buttonSize.w + buttonSpace) * buttonArr.length, width: buttonSize.w, height: buttonSize.h }}>
            </LightButton>
            buttonArr.push(element)
        }

        const useHideAch = Configer.getConfig(ConfigKey.useHideAch);
        const hideAchButton: string = Configer.getResource(ResourceKey.hideAchButton);
        if (useHideAch && useHideAch > 0 && hideAchButton && hideAchButton.length && hideAchButton.length > 0) {
            const element = <LightButton   key={GuiKeys.buttonEnterHideAch} onMouseDown={(event) => {
                return this.open(GuiId.hideAchBar);
            }} style={{ backgroundImage: hideAchButton, top: topButtonY, left: buttonMarginX + (buttonSize.w + buttonSpace) * buttonArr.length, width: buttonSize.w, height: buttonSize.h }}>
            </LightButton>
            buttonArr.push(element)
        }

        return <View   key={GuiKeys.buttonEnterContent}>
            {buttonArr}
            <View key={GuiKeys.sideButtons} style={{ left: 0.2, top: 0.8, width: 0.07, height: 0.01 }}>
                {sideButtonArr}
            </View>
        </View>;
    }

    open = (guiId: GuiId) => {
        const syncData: UISyncData = { id: SyncId.onlyOneOpen, param: { guiId: guiId } };
        return syncData;
    }

}